<template>
    <div class="mac-window">
        
        <div class="title-bar">
            <div class="buttons">
                <span class="button close"></span>
                <span class="button minimize"></span>
                <span class="button zoom"></span>
            </div>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;HikerSystem</h1>
        </div>
    <div style="display: flex;">
        <div class="scrollable-sidebar">
            
          <br/>
            <p style="margin: 20px 3px 15px 3px;" >
                <router-link :to="'/home?UID=' + this.$route.query.UID" class="a"><img src="..\assets\backspace.png" width="12" height="12"/>返回主页</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/create_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\mine.png" width="12" height="12"/>创建队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flexl; background-color: gray; border-radius: 0;" >
                <router-link :to="'/join_team?UID=' + this.$route.query.UID" class="a"style="color:aliceblue"><img src="..\assets\new.png" width="12" height="12"/>加入队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/application?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>管理申请</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/account?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>我的信息</router-link>
            </p>
                
        </div>


        <div class="main-sidebar" style="display: grid; grid-template-columns: 1fr 1fr;">
                <div class="left-half">
                  <br/><img src="..\assets\duiwuliebiao.png" width=90 />
                <div style="margin: 20px 3px 15px 3px; display: flex" v-for="team in teamList.data" :key="index">
                    <button style="width: 18vw; margin: 3px;" @click="chooseTeam(team.name, team.id)">{{ team.name }}</button>
                </div>
                </div>
            <form @submit.prevent="handleSubmit">
                <p>您将加入队伍：{{ chosenTeam[0] }}</p>
                <!--<input type="text" id="reason" v-model="reason" placeholder="请输入申请原因"/> -->
                <p>
                    是否发送队伍加入申请？
                    <button type="submit">发送申请</button>
                </p>  
            </form>
        </div>
    
    </div>
    </div>

</template>


<script>
const IP = 'http://47.113.197.249:8083';
import '../assets/mac.css';
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

export default {
  data() {
    return {
      teamList: {},
      chosenTeam: ['', ''],
    };
  },

  
  mounted(){
    axios.post(IP + '/user/joinableTeamList', {user: {id: this.$route.query.UID}})
  .then(response => {
    console.log(response.data.teamList);
    this.teamList = response.data;
  })
  .catch(error => {
    console.error('获取数据失败:', error);
  });
  },

  methods: {
    chooseTeam(name, id) {
      this.chosenTeam = [name, id];
    },
  },


  setup() {
    const route = useRoute();
    const chosenTeam = ref(['', '']);
    
    

    const handleSubmit = () => {
      const teamID = {
        id: chosenTeam.value[1],
      };
      const userID = {
        id: route.query.UID,
      }
      const totalData = {
        user: userID,
        team: teamID,
      }
      console.log('Sent Data', totalData);
      axios.post(IP + '/user/setTeamMember', totalData)
        .then(response => {
          alert('发送成功！');
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });
    };
    return {
      handleSubmit,
      chosenTeam,
    }
  }
};
</script>


<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
    background-color: #F9F9F9;
}
</style>